
 section.booked-box {
   margin: 0 10px 20px 12px;
   position: relative;
   cursor: pointer;

   .cal-booked-timeline {
     line-height: 40px;
     color: #999999;
   }
   .cal-booked-timeline.active {
     color: #f6bf50;
   }

   &:before {
     content: '';
     display: block;
     height: 120%;
     border-left: 1px dashed #d2d2d2;
     position: absolute;
     margin-left: -7px;
     top: 17px;
   }

   &:after {
     content: '•';
     display: block;
     position: absolute;
     top: -1px;
     left: -12px;
     font-size: 30px;
   }

   &:hover .cal-booked-timeline,
   &:hover:after
   {
     color: #ff9900;
   }


   &:hover{
     .cal-booked-table-wrap {
       border: 1px solid rgb(255, 225, 172)!important;
       box-shadow: 0px 0px 7px 0px rgba(219, 140, 0, 0.38)!important;
     }
   }

 }





section.booked{
  position: relative;
  width: 98%;
  margin: 0 auto;

  .booked-viewer {
    .viewer {

      height: 0;
      transition: all ease .4s;
      visibility: hidden;

      &.active {
        margin: 10px;
        padding: 10px;
        height: 200px;
        visibility: visible;
      }
    }

    .barline{
      background: #f0f0ee;
      overflow: hidden;
      border-radius: 6px;
      text-align: left;
      padding: 4px;
      >span {
        font-size: 10px;
      }
      .bar{
        float: right;
        width: 16px;
        height: 16px;
        background: url(../../assets/images/icons/arrow_down_32_dark.png) no-repeat center;
        cursor: pointer;
        transition: all ease .4s;
        background-size: 100%;
        &.active{
          transform: rotateZ(180deg);
        }
      }

    }

  }

  .booked-result {
    text-align: right;
    text-transform: capitalize;
  }

}


section.booked .cal-booked-table-wrap {
  border-radius: 6px;
  border: 1px solid white;
  box-shadow: 0px 0px 7px 0px #ececec;
  background-color: rgb(255, 255, 255);
  padding: 10px;
  transition: all ease .4s;
}

section.booked .cal-booked-table-wrap  > table {
  width: 88%;
  color: #7d7d7d;
  font-size: 12px;
  margin: 0px 0 0 4px;
  line-height: 21px;

  th {
    width: 14%;
    text-align: right;
  }

}

section.booked .booked-avatar-wrap {
  overflow: hidden;
  width: 66px;
  height: 66px;
  margin: 0 auto;
  background: #dcdee1;
  padding: 2px;
}

section.booked .booked-avatar-wrap > i {
  float: left;
  width: 20px;
  height: 20px;
  background: #efefef;
  margin: 1px;
}

section.booked label {
  font-weight: bold;
}


section.booked:hover .cal-booked-timeline,
section.booked:hover:after
{
  color: #ff9900;
}


section.booked .cal-booked-table-wrap {
  border: 1px solid rgb(244, 244, 244);
}

section.booked:hover .cal-booked-table-wrap {
  border: 1px solid rgb(255, 225, 172);
  box-shadow: 0px 0px 7px 0px rgba(219, 140, 0, 0.38);
}

.btn {
  position: absolute;
  right: 10px;
  padding: 2px 6px;
  border-radius: 2px;
}

section.booked:hover .btn {
  border-color: #ff9900;
  color: #ff9900;
}


section.booked .btn:hover {
  background: #ff9900;
  color: white;
}


.booked-avatar-wrap {
  overflow: hidden;
  width: 66px;
  height: 66px;
  background: #dcdee1;
  padding: 2px;
}

.booked-avatar-wrap{

  > img {

    width: 100%;
    height: 100%;

  }
}
